import React from 'react';
import {
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    ActivityIndicator,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableHighlight,
    SectionList,
    TouchableOpacity,
    Modal, DeviceEventEmitter
} from 'react-native';
import Swiper from 'react-native-swiper';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import AsyncStorage from '@react-native-community/async-storage';
const { width, height } = Dimensions.get('window');
import Styles from './Styles';

import app from '../../../app.json';
import Ugame from '../../../Ugame';
import Httpc from "../../utils/Httpc";
import REQUEST from "../../../REQUEST";
import Football from "../../utils/Football";
import Utils from "../../utils/Utils";

import RootSiblings from 'react-native-root-siblings';

var id = 0;
var elements = [];
var weekday = new Array(7);
weekday[0] = "星期天";
weekday[1] = "星期一";
weekday[2] = "星期二";
weekday[3] = "星期三";
weekday[4] = "星期四";
weekday[5] = "星期五";
weekday[6] = "星期六";

export default class FootballLottery extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            single_type: ["胜平负", "让球胜平负", "比分", "总进球数", "半全场",],
            lists: [],
            curr_single_type: '胜平负'
        };
        this.dates = [];
        this.date = null;
        this.getServerData = this.getServerData.bind(this);
        this._time = null;
    }
    static navigationOptions = ({ navigation }) => {
        return {
            headerTitle: () => (
                <View style={Styles.header}>
                    <View></View>
                    <View>
                        <Text style={{ color: '#ffffff' }}>竞彩足球开奖</Text>
                    </View>
                    <View style={Styles.header_right}>
                        <TouchableOpacity onPress={navigation.getParam('show_right_menu')}>
                            <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                                <Image resizeMode="cover" style={{ width: 16, height: 19 }} source={require('../../image/js_img_calendar.png')} />
                                <Text style={{ marginTop: -15, color: '#ffffff', fontSize: 10 }}>7</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            ),
            headerStyle: {
                backgroundColor: '#d0162e',
                paddingTop: 18
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                //fontWeight: 'bold',
            },
        };
    };
    componentWillMount() {
        //组件将要被加载到视图之前调用


    }
    componentDidMount() {
        // 在调用了render方法，组件加载成功并被成功渲染出来之后，所要执行的后续操作，一般都会在这个函数中进行，比如经常要面对的网络请求等加载数据操作
        // *** 因为UI已经成功渲染，而且这里面是异步的，所以放在这个函数进行数据的请求等复杂的操作，不会出现UI错误**
        this.props.navigation.setParams({ show_right_menu: this.show_right_menu });
        var day2 = new Date();
        day2.setTime(day2.getTime());
        this.date = day2.getFullYear() + "-" + (day2.getMonth() + 1) + "-" + day2.getDate();
        this.dates.push(this.date);
        for (let i = 1; i < 7; i++) {
            let d = new Date().setDate((new Date().getDate() - i));
            d = new Date(d).getFullYear() + "-" + (new Date(d).getMonth() + 1) + "-" + new Date(d).getDate();
            this.dates.push(d);
        }
        this.getServerData(() => {

        });

    }
    componentWillUnmount() {
        if (!!this.listener) this.listener.remove();
        if (elements.length > 0) {
            this.destroySibling();
        }
    }
    getServerData = (func) => {
        Httpc.get(REQUEST.GameFootHisList, { date: this.date }, (res) => {
            let result = res.Data;
            this.setState({
                lists: res.Data
            })
        })
    }
    _on_change_single_type = (type) => {
        console.log(type);
        this.destroySibling();
        this.setState({
            curr_single_type: type
        });
    }

    _on_goIntroduce = (date) => {
        this.destroySibling();
        this.date = date;
        this.getServerData(() => {

        });

    }

    _createDateItem = ({ item }) => {
        return (
            <TouchableOpacity onPress={() => this._on_goIntroduce(item)}>
                <Text style={Styles.right_menu_item}>{item}</Text>
            </TouchableOpacity>
        );
    }
    _show_right_menu_model = () => {
        this.destroySibling();
        return (
            <TouchableOpacity style={Styles.sibling} onPress={this.destroySibling}>
                <View style={Styles.right_menu}>
                    <Image resizeMode="cover" style={Styles.right_menu_bg} source={require('../../image/js_img_menu_jincai_bg.png')} />
                    <View style={{ paddingRight: 5 }}>
                        <FlatList
                            data={this.dates}
                            keyExtractor={(item, index) => index.toString()}
                            renderItem={this._createDateItem}
                        />
                    </View>
                </View>
            </TouchableOpacity>
        );
    }
    show_right_menu = () => {
        if (elements.length == 0) {
            let sibling = new RootSiblings(this._show_right_menu_model());
            id++;
            elements.push(sibling);
        } else {
            this.destroySibling();
        }
    }
    show_single_type = () => {
        if (elements.length == 0) {
            let sibling = new RootSiblings(this._show_single_type_model());
            id++;
            elements.push(sibling);
        } else {
            this.destroySibling();
        }
    }
    _createTypeItem = ({ item }) => {
        return (
            <TouchableOpacity onPress={() => this._on_change_single_type(item)}>
                <Text style={Styles.right_menu_item}>{item}</Text>
            </TouchableOpacity>
        );
    }
    _show_single_type_model = () => {
        this.destroySibling();
        return (
            <TouchableOpacity style={Styles.type_sibling} onPress={this.destroySibling}>
                <View style={Styles.right_menu}>
                    <Image resizeMode="cover" style={Styles.type_right_menu_bg} source={require('../../image/js_img_menu_jincai_bg.png')} />
                    <View style={{ paddingRight: 5 }}>
                        <FlatList
                            data={this.state.single_type}
                            keyExtractor={(item, index) => index.toString()}
                            renderItem={this._createTypeItem}
                        />
                    </View>
                </View>
            </TouchableOpacity>
        );
    }
    destroySibling = () => {
        let lastSibling = elements.pop();
        lastSibling && lastSibling.destroy();
    };
    _createListsItem = ({ item }) => {
        let { curr_single_type } = this.state;
        switch (curr_single_type) {
            case '胜平负':
                return (
                    <View style={{ height: 65, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderBottomColor: '#f7f7f7', borderBottomWidth: 1 }}>
                        <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: width / 4 }}>
                            <Text>{item.sort_num}</Text>
                            <Text>{item.l_cn_abbr}</Text>
                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: width / 4 }}>
                            <Text>{item.h_cn_abbr}</Text>
                        </View>
                        <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: width / 4 }}>
                            <Text>{item.fs_h}:{item.fs_a}</Text>
                            <Text style={{ color: '#d0162e', fontSize: 12 }}>
                                {item.fs_h > item.fs_a ? '主胜' : (item.fs_h == item.fs_a ? '平' : '主负')}
                            </Text>
                        </View>
                        <Text style={{ width: width / 4, textAlign: 'center' }}>{item.a_cn_abbr}</Text>
                    </View>
                );
                break;
            case '让球胜平负':
                return (
                    <View style={{ height: 65, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderBottomColor: '#f7f7f7', borderBottomWidth: 1 }}>
                        <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: width / 4 }}>
                            <Text>{item.sort_num}</Text>
                            <Text>{item.l_cn_abbr}</Text>
                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: width / 4 }}>
                            <Text>{item.h_cn_abbr}</Text>
                            <Text style={{ color: '#d0162e', fontSize: 12 }}>({item.goaline > 0 ? ('+' + item.goaline) : item.goaline})</Text>
                        </View>
                        <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: width / 4 }}>
                            <Text>{item.fs_h}:{item.fs_a}</Text>
                            <Text style={{ color: '#d0162e', fontSize: 12 }}>({item.fs_h > item.fs_a ? '让胜' : (item.fs_h == item.fs_a ? '平' : '让负')})</Text>
                        </View>
                        <Text style={{ width: width / 4, textAlign: 'center' }}>{item.a_cn_abbr}</Text>
                    </View>
                );
                break;
            case '总进球数':
                return (
                    <View style={{ height: 65, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderBottomColor: '#f7f7f7', borderBottomWidth: 1 }}>
                        <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: width / 4 }}>
                            <Text>{item.sort_num}</Text>
                            <Text>{item.l_cn_abbr}</Text>
                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: width / 4 }}>
                            <Text>{item.h_cn_abbr}</Text>
                        </View>
                        <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: width / 4 }}>
                            <Text>{item.fs_h}:{item.fs_a}</Text>
                            <Text style={{ color: '#d0162e', fontSize: 12 }}>
                                {(Number(item.fs_h) + Number(item.fs_a)) + '个'}
                            </Text>
                        </View>
                        <Text style={{ width: width / 4, textAlign: 'center' }}>{item.a_cn_abbr}</Text>
                    </View>
                );
                break;
            case '比分':
                return (
                    <View style={{ height: 65, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderBottomColor: '#f7f7f7', borderBottomWidth: 1 }}>
                        <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: width / 4 }}>
                            <Text>{item.sort_num}</Text>
                            <Text>{item.l_cn_abbr}</Text>
                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: width / 4 }}>
                            <Text>{item.h_cn_abbr}</Text>
                        </View>
                        <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: width / 4 }}>
                            <Text>{item.fs_h}:{item.fs_a}</Text>
                        </View>
                        <Text style={{ width: width / 4, textAlign: 'center' }}>{item.a_cn_abbr}</Text>
                    </View>
                );
                break;
            case '半全场':
                return (
                    <View style={{ height: 65, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderBottomColor: '#f7f7f7', borderBottomWidth: 1 }}>
                        <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: width / 4 }}>
                            <Text>{item.sort_num}</Text>
                            <Text>{item.l_cn_abbr}</Text>
                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: width / 4 }}>
                            <Text>{item.h_cn_abbr}</Text>
                        </View>
                        <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: width / 4 }}>
                            <Text style={{ fontSize: 10, color: '#666666' }}>({item.hts_h}:{item.hts_a})</Text>
                            <Text>{item.fs_h}:{item.fs_a}</Text>
                            <Text style={{ color: '#d0162e', fontSize: 12 }}>
                                {item.hts_h > item.hts_a ? '胜' : (item.hts_h == item.hts_a ? '平' : '负')}
                                {item.fs_h > item.fs_a ? '胜' : (item.fs_h == item.fs_a ? '平' : '负')}</Text>
                        </View>
                        <Text style={{ width: width / 4, textAlign: 'center' }}>{item.a_cn_abbr}</Text>
                    </View>
                );
                break;
        }

    }
    _on_go_FootballGame=()=>{
        if (Ugame.isLogin()) {
            this.props.navigation.navigate('FootballGame');
        } else {
            this.props.navigation.navigate('Login');
        }
    }
    render() {
        let { lists, curr_single_type } = this.state;
        return (
            <View style={Styles.container}>
                <StatusBar translucent={true} backgroundColor="transparent" />
                <View style={{ height: 40, backgroundColor: '#f7f7f7', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingLeft: 12, paddingRight: 12 }}>
                    <Text style={{ fontSize: 12, color: '#666666' }}>{this.date} {weekday[new Date(this.date).getDay()]}</Text>
                    <TouchableOpacity onPress={() => this.show_single_type()}>
                        <View style={{ width: 90, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderRadius: 5, borderColor: '#d0162e', borderWidth: 0.5, paddingTop: 2, paddingBottom: 2 }}>
                            <Text style={{ color: '#d0162e', fontSize: 12 }}>{curr_single_type}</Text>
                            <Image resizeMode="cover" style={{ width: 8, height: 4 }} source={require('../../image/js_img_right_triangle.png')} />
                        </View>
                    </TouchableOpacity>
                </View>
                <FlatList
                    data={lists}
                    extraData={this.state}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={this._createListsItem}
                />
                <View>
                    <TouchableOpacity onPress={() => this._on_go_FootballGame()}>
                        <Text style={{ width: width - 24,margin:12, height: 40, backgroundColor: '#d0162e', color: '#ffffff',lineHeight:40,textAlign:'center' }}>竞彩足球投注</Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }
}

